﻿<template>
    <div class="ad-content">
        <div class="ad-main">
            <div class="ad-console-top">
                <div class="ad-console-top-name">领导绑定</div>
                <div class="ad-console-top-body"></div>
                <div class="ad-console-top-end"></div>
            </div>
            <div class="ad-console-body">
                <div class="ad-console-toolbar">
                    <el-button type="primary" size="mini" icon="icon-cog4 el-icon--left" @click="openAddDialog()">添加领导</el-button>
                    <el-button type="primary" size="mini" icon="icon-cog4 el-icon--left" @click="openDialog()">修改</el-button>
                    <el-button type="primary" size="mini" icon="icon-cog4 el-icon--left" @click="delDialog()">删除</el-button>
                    <div style="float:right">
                        <div class="searchList">
                            <span>年份：</span>
                            <el-select v-model="cYear">
                                <el-option v-for="item in searchYearList" :key="item.value" :label="item.name" :value="item.value"></el-option>
                            </el-select>
                        </div>
                        <el-input v-model="searchunit" prefix-icon="el-icon-search" placeholder="输入责任部门" style="width:130px;" size="mini"></el-input>
                        <el-input v-model="searchkey" prefix-icon="el-icon-search" placeholder="输入领导姓名或目录" @keyup.enter.native="search()" style="width:200px;" size="mini"></el-input>
                        <el-button type="primary" size="mini" @click="search(true)" style="padding: 7px 10px;">搜索</el-button>
                    </div>
                </div>
                <el-card class="box-card">
                    <el-table ref="tbl" size="mini" :data="plist" border style="width: 100%" @select="handleSelect">
                        <el-table-column type="selection" width="50" align="center"></el-table-column>
                        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                        <el-table-column prop="Year" width="100" label="年份" align="left"></el-table-column>
                        <el-table-column prop="Tactic" width="55" label="排序" align="left"></el-table-column>
                        <el-table-column prop="Leader" width="150" label="市领导" align="left"></el-table-column>
                        <el-table-column prop="TaskPath" label="所属目录" width="250" align="left"></el-table-column>
                        <el-table-column prop="UnitName" label="责任部门" align="left"></el-table-column>

                    </el-table>
                    <br />
                    <div style="text-align:center"><el-pagination v-if="count>0" background layout="total, prev, pager, next" :current-page="currentpage" :total="count" @current-change="pagerclick"></el-pagination></div>
                </el-card>
            </div>
            <el-dialog title="领导添加" class="dlg" v-dialogDrag :visible="showAdd" width="500px" @close="closeDialog()">
                <el-form :model="form" class="rule" status-icon :rules="rules" ref="form" label-width="80px">
                    <el-form-item label="年份" prop="year">
                        <el-select v-model="form.year" placeholder="请选择年份" style="width:50%">
                            <el-option v-for="item in yearList"
                                       :key="item"
                                       :label="item"
                                       :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <el-col :span="24">
                            <el-form-item label="temp" prop="lead">
                                <span slot="label">添加领导</span>
                                <el-input v-model="form.lead" size="medium" placeholder="请输入领导名称" style="width:70%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="所属目录">
                        <el-input v-model="form.path" size="medium" placeholder="请输入所属目录" style="width:70%"></el-input>
                    </el-form-item>

                    <el-form-item label="责任部门" prop="leadunit">
                        <el-select v-model="form.leadunit" multiple placeholder="请选择责任部门" style="width:70%">
                            <el-option v-for="item in leadunitList"
                                       :key="item.value"
                                       :label="item.name"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-bottom:0px;">
                        <el-button type="primary" size="medium" @click="submit('form')">提交</el-button>
                        <el-button size="medium" @click="closeDialog()">关闭</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="领导绑定" class="dialog dlg" v-dialogDrag :visible="showDialog" width="500px" @close="closeDialog()">
                <el-form :model="ruleForm" ref="ruleForm" label-width="85px">
                    <el-form-item label="年份" prop="year">
                        <el-select v-model="ruleForm.year" placeholder="请选择年份" style="width:80%">
                            <el-option v-for="item in yearList"
                                       :key="item"
                                       :label="item"
                                       :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="市领导" prop="lead">
                        <el-input v-model="ruleForm.lead" size="medium" placeholder="请输入市领导" style="width:100%"></el-input>
                        <!--<el-select v-model="ruleForm.lead" filterable multiple placeholder="请选择市领导" style="width:80%">
            <el-option v-for="item in leadList"
                       :key="item.id"
                       :label="item.text"
                       :value="item.id">
            </el-option>
        </el-select>-->
                    </el-form-item>
                    <el-form-item label="排序" prop="tactic">
                        <el-input v-model="ruleForm.tactic" size="medium" placeholder="请输入排序" style="width:100%"></el-input>
                    </el-form-item>
                    <el-form-item label="所属目录">
                        <el-input v-model="ruleForm.path" size="medium" placeholder="请输入所属目录" style="width:100%"></el-input>
                        <!--<el-select v-model="ruleForm.path" filterable multiple placeholder="请选择所属目录" style="width:80%">
            <el-option v-for="item in pathList"
                       :key="item.value"
                       :label="item.text"
                       :value="item.value">
            </el-option>
        </el-select>-->
                    </el-form-item>
                    <el-form-item label="责任部门" prop="leadunit">
                        <el-select v-model="ruleForm.leadunit" multiple placeholder="请选择责任部门" style="width:100%">
                            <el-option v-for="item in leadunitList"
                                       :key="item.value"
                                       :label="item.name"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <div style="text-align:center;">
                        <el-button type="primary" size="medium" @click="setDept('ruleForm')">提交</el-button>
                        <el-button size="medium" @click="closeDialog()">关闭</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                UnitID: '',
                Unit: null,
                count: 0,
                currentpage: 0,
                unbind: false,
                ShowTree: true,
                showDialog2:false,
                showDialog: false,
                showAdd: false,
                keys: [],
                plist: [],
                props: {
                    label: 'label',
                    isLeaf: 'isLeaf'
                },
                key: '',
                searchkey: '',
                searchunit:'',
                ruleForm: {
                    id:0,
                    year: "",
                    lead: "",
                    path: "",
                    leadunit: [],
                    tactic: ""
                },
                rules: {                  
                    year: [
                        { required: true, message: '请选择年份', trigger: 'change' }
                    ],
                    lead: [
                        { required: true, message: '请输入领导名称', trigger: 'change' }
                    ]
                },
                yearList: [2021,2022,2023],
                leadList: [],
                pathList: [],
                leadunitList: [],
                form: {
                    leader: '',
                    year: 2023,
                    path: '',
                    leadunit: [],                   
                },
                cYear: "",
                searchYearList:[]
            }
        },
        mounted() {
            App.Page.init(this);
            
            this.loadUnit();
            this.getYear();
        },
        methods: {
            getYear() {
                App.Service.post("/plus/yqd/WxMySupervise/GetHSearch", {}).then((res) => {
                    if (res.success) {
                        this.searchYearList = res.years;
                        this.cYear = res.years[1].value;
                        this.load();
                    }
                });              
            },
            search(bl) {
                if (bl) this.currentpage = 0;
                this.load();
            },
            loadUnit() {
                App.Service.post("/plus/Yqd/Department/GetUnitList2", {}).then((res) => {
                    if (res.success) {
                        this.leadunitList = res.data;
                    }
                });
            },
            find() {
                this.ShowTree = false;
                this.treeload(null, this.resolve);
            },
            chkchange() {
                this.currentpage = 0;
                this.load();
            },
            load() {
                App.Service.post("/plus/Yqd/UnitLeader/GetList", {
                    start: App.Fn.toStart(this.currentpage),
                    limit: App.pagesize,
                    key: this.searchkey,
                    year: this.cYear,
                    unit: this.searchunit
                }).then((res) => {
                    if (res.success) {
                        this.count = res.totalcount;
                        this.plist = res.data;
                    }
                });
            },
            pagerclick(currentpage) {
                this.currentpage = currentpage;
                this.load();
            },
            openDialog() {
                if (this.Unit == null) {
                    App.Msg.error('请选择一条！');
                    return;
                }
                this.showDialog = true;
                console.log(this.Unit);
                this.ruleForm.id = this.Unit.ID;
                this.ruleForm.year = this.Unit.Year;
                this.ruleForm.lead = this.Unit.Leader;
                this.ruleForm.path = this.Unit.TaskPath;
                this.ruleForm.tactic = this.Unit.Tactic;
                if (this.Unit.UnitValue.length > 0) {
                    this.ruleForm.leadunit = this.Unit.UnitValue.split(',');
                } else {
                    this.ruleForm.leadunit = [];
                }
            },
            delDialog() {
                if (this.Unit == null) {
                    App.Msg.error('请选择一条！');
                    return;
                } else {
                    this.$confirm("是否确认删除?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        App.Service.post("/plus/Yqd/UnitLeader/Delete", {
                            ID: this.Unit.ID
                        }).then((res) => {
                            if (res.success) {
                                App.Msg.success('删除成功！');
                                this.load();
                            }
                        });                      
                    });
                }
            },
            openAddDialog() {
                this.showAdd = true;
                this.form.leadunit = [];
            },
            closeDialog() {
                this.showDialog = false;
                this.showAdd = false;
            },
            checkNode: function (a, b) {
                if (b.checkedKeys.length > 0) {
                    this.UnitID = a.ID;
                    this.$refs.tree.setCheckedKeys([a.ID]);
                }
            },
            handleSelect(selection, row) {
                this.$refs.tbl.clearSelection();
                if (selection.length == 0) {
                    this.Unit = null;
                    return;
                }
                if (row) {
                    this.Unit = row;
                    this.$refs.tbl.toggleRowSelection(row, true);
                }
            },
            setDept(formName) {
                //提交接口
                App.Service.post("/plus/Yqd/UnitLeader/Update", {
                    id: this.ruleForm.id,
                    year: this.ruleForm.year,
                    leader: this.ruleForm.lead,
                    taskPath: this.ruleForm.path,
                    leadunit: this.ruleForm.leadunit.length == 0 ? "" : this.ruleForm.leadunit.join(","),
                    tactic: this.ruleForm.tactic,
                }).then((res) => {
                    if (res.success) {
                        App.Msg.success('更新成功！');
                        this.closeDialog();
                        this.load();
                    }
                });
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let poprms = {};
                        //提交接口
                        App.Service.post("/plus/Yqd/UnitLeader/add", {
                            year: this.form.year,
                            leader: this.form.lead,
                            taskPath: this.form.path,
                            leadunit: this.form.leadunit.length == 0 ? "" : this.form.leadunit.join(","),
                        }).then((res) => {
                            if (res.success) {
                                App.Msg.success('添加成功！');
                                this.closeDialog();
                                this.load();
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    };
</script>
<style>
    .searchList {
        float: left;
        margin-right:20px;
    }
    .searchList span {
        float:left;
        height:28px;
        line-height:28px;
    }
    .searchList .el-select {
        width: 100px;
        float: left;
    }
    .searchList .el-select .el-input__inner {
        height: 28px;
        line-height: 28px;
    }
    .searchList .el-select .el-input__icon {
        line-height: 28px;
    }
</style>
